﻿
<html>
<head>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>


<div id='container'>The player will be placed here</div>
<script type="text/javascript">
//http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16022/controlling-the-player-using-javascript

  jwplayer("container").setup({
  "controlbar.position": "bottom",
    //file:'out/207/1.mov.mp4',
    //file:'1.mov.mp4',
   file:'http://10.10.17.163:81/{{ v.dst }}',
    provider:'http',
    'http.startparam':'start',
    flashplayer: "http://www.longtailvideo.com/files/player.swf",
    height: 270,
    width: 480
  });


</script>

    <ul>
    <li><div></div>원본<div>{{ v.src }}</div></li>
    <li><div></div>프록시<div>{{ v.dst }}</div></li>
    <li><div></div>상태:트랜스코딩<div>{{     v.status_transcode }}</div></li>
    <li><div></div>상태:카탈로깅<div>{{     v.status_catalog }}</div>    </li>
    </ul>

<div style="overflow:scroll;width:100%;height:500">
    <ol>
        {% for shot in v.shot_set.all %}
            <div class="img">
                  <a href="#"  onclick="javascript:jwplayer().play().seek({{ shot.nsec }});">
                  <img src="http://10.10.17.163/t/{{ shot.path }}" />
                  <div class="desc">{{ shot.as_timecode }}</div>            
                  </a>                  
            </div>
            <!--<li><a href="#"  onclick="javascript:jwplayer().play().seek({{ shot.nsec }});"><div>{{ shot.as_timecode }}</div> <img src="http://10.10.17.163/t/{{ shot.path }}"></img></a></li>-->
        {% endfor %}
    </ol>
</div>

</body>
</html>